<template>
	<div class="mine">
		<div class="headerBox">
			<div class="header">
				<div class="userInfo">
					<div class="avatar-container">
						<van-uploader v-model="fileList" multiple :max-count="1" preview-size="60px">
							<template>
								<div class="van-uploader__input-wrapper"><img class="avatar-img" src="../../assets/images/default_chat.png" lazy="loaded" style="width: 60px; height: 60px;"></div>
							</template>
						</van-uploader>
						<i class="iconfont icon-icon_edit_avatar"></i>
					</div>
					<div class="user">
						<p class="userName"><span class="hi">HI, </span>xiaobao</p>
						<p class="joinDay">Gia nhập ngày thứ 5 </p>
					</div>
				</div>
				<div class="service"><i class="iconfont icon-icon_customer_service"></i></div>
			</div>
			<div class="card moneyBox">
				<div class="money">
					<p class="userMoney"> 100,000,000 </p>
					<div class="refresh"><span class="myPurseText">Ví tiền của tôi</span>
						<div class="refreshIconBox"><i class="iconfont icon-icon_refresh_blue_12 refreshIcon"></i></div>
					</div>
				</div>
				<div class="payOrwithdraw">
					<div @click="url('/recharge')" class="pay"><span>Nạp tiền</span></div>
					<div @click="url('/addBankCard')" class="withdraw"><span>Rút tiền</span></div>
				</div>
			</div>
		</div>
		<div class="mineBody">
			<div  class="card navigationBox">
				<div class="van-grid" >
					<div @click="url('/personalInfo')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span class="iconfont gradient icon-icon_personal_data"></span></div><span class="title"> Thông tin cá nhân</span>
						</div>
					</div>
					<div @click="url('/bettingRecord')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span class="iconfont gradient icon-icon_vote_record"></span></div><span class="title"> Lịch sử cược</span>
						</div>
					</div>
					<div @click="url('/transactionRecord')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span  class="iconfont gradient icon-icon_top_up_record"></span></div><span class="title"> Lịch sử giao dịch</span>
						</div>
					</div>
					<div @click="url('/messageCenter')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span  class="iconfont gradient icon-icon_message_centre"></span></div><span class="title"> Hòm thư</span>
						</div>
					</div>
					<div @click="url('/quotaConversion')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span class="iconfont gradient icon-icon_transfer_amount"></span></div><span class="title"> Chuyển quỹ</span>
						</div>
					</div>
					<div @click="url('/fundsDetails')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span class="iconfont gradient icon-icon_funds_details_nor"></span></div><span class="title"> Giao dịch</span>
						</div>
					</div>
					<div @click="url('/historyData')" class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
						<div class="van-grid-item__content van-grid-item__content--square">
							<div class="icon"><span class="iconfont gradient icon-icon_draw_notice"></span></div><span class="title"> Chi tiết</span>
						</div>
					</div>
				</div>
			</div>
			<div class="card promote">
				<van-swipe class="index-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="item in 4" :key="item">
						<img src="../../assets/images/banner.jpg">
					</van-swipe-item>
				</van-swipe>
			</div>
			<div class="listItem">
				<van-cell is-link to="/help" title="Trung tâm trợ giúp"></van-cell>
				<van-cell is-link title="Phiên bản phần mềm">
					<template #default>
						<div class="version">V1.2.8</div>
					</template>
				</van-cell>
				<van-cell @click="clear" is-link title="Xoá bộ nhớ cache"></van-cell>
				<van-cell is-link title="Tải xuống APP"></van-cell>
			</div>
			<div class="logout">
				<div class="logoutBtn">Đăng xuất</div>
			</div>
		</div>
		<Foot :active="4"></Foot>
	</div>
</template>

<script>
	import { Notify } from 'vant';
	import Foot from "@/components/Foot.vue";
	export default {
		components: {
			Foot
		},
		data() {
			return {
				fileList: [],
			}
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			clear() {
				Notify({ type: 'success', message: 'Đã xóa bộ nhớ cache' });
			},
		}
	}
</script>
<style>
</style>
